<template>
  <div class="modelType4-box"
       :style="styleMianObject">
    <div class="box-name"
         :style="nameStyleObject">{{ list.name }}</div>
    <el-collapse v-model="activeName"
                 class="collapse-box"
                 accordion>
      <el-collapse-item v-for="(content, index) in list.contentLists"
                        :key="index"
                        :title="content.title"
                        :name="index">
        <div v-html="content.content"></div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Object,
      default: {
        title: ""
      }
    }
  },
  data () {
    return {
      nameStyleObject: {
        fontSize: '40px',
        height: '60px',
        paddingLeft: '30px'
      },

      styleMianObject: {
        padding: '0px 30px 100px 0px'
      },

      activeName: [],
      zoom: 1
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getStyle()
    })
  },
  watch: {
    list: {
      handler: function (n, o) {
        this.getStyle()
      },
      deep: true
    }
  },
  methods: {
    getStyle () {
      const offsetWidth = document.getElementsByClassName("modelType4-box")[0].offsetWidth
      this.zoom = offsetWidth / 1898
      this.nameStyleObject.fontSize = 40 * this.zoom + 'px'
      this.nameStyleObject.height = 60 * this.zoom + 'px'
      this.nameStyleObject.paddingLeft = 30 * this.zoom + 'px'
      const itemHeader = document.getElementsByClassName('el-collapse-item__header')
      const itemContent = document.getElementsByClassName('el-collapse-item__content')
      setTimeout(() => {
        const collapseHeight = document.querySelector(".collapse-box").getBoundingClientRect().height
        for (let index = 0; index < itemHeader.length; index++) {
          itemHeader[index].style.setProperty('--collapse-item-height', `${collapseHeight / itemHeader.length}px`)
          itemHeader[index].style.setProperty('--collapse-item-fontsize', `${collapseHeight / itemHeader.length * 15 / 100}px`)
          itemContent[index].style.setProperty('--content-style-fontSize', `${collapseHeight / itemHeader.length * 13 / 100}px`)
        }
      }, 100);


      this.styleMianObject.padding = `${0 * this.zoom}px ${30 * this.zoom}px ${100 * this.zoom}px ${50 * this.zoom}px`

    }
  }

}
</script>
<style>
.el-collapse::-webkit-scrollbar {
  width: 8px; /* 或者 height: 8px，根据需要设置 */
}

/* 设置滚动滑块的颜色和圆角 */
.el-collapse::-webkit-scrollbar-thumb {
  background-color: #969393; /* 滑块颜色 */
  border-radius: 10px; /* 圆角 */
}

/* 设置滚动条轨道的背景色 */
.el-collapse::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道背景色 */
}
</style>

<style lang="less" scoped>
::v-deep {
  .el-collapse-item__content {
    font-size: var(--content-style-fontSize);
    color: #de2b01;
  }

  .el-collapse {
    height: 100%;
    overflow-y: scroll;
  }

  .el-collapse-item__header {
    height: var(--collapse-item-height);
    line-height: var(--collapse-item-height);
    color: #004ea6;
    font-size: var(--collapse-item-fontsize);
    padding: 0 5%;
  }
  .el-collapse-item__content {
    background: url(../../../assets//img/bg-type/type4-1.png) no-repeat 100%
      100%;
    background-size: 100% 100%;
    padding: 5%;
  }
}
.modelType4-box {
  background: url(../../../assets//img/bg-type/type2-1.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  .title-style {
    position: absolute;
    bottom: 45%;
    color: #004da1;
    width: 50%;
    font-weight: bold;
  }
  .box-name {
    color: #004da7;
  }
}
</style>
